$(function () {
    //  联系我们
    var $shop_li = $(".header_shop");
    var $goshop = $(".goshop");
    $shop_li.on("mouseover", function () {

        $goshop.show();
    })
    $goshop.on("mouseover", function () {
        $goshop.show();
    })
    $goshop.on("mouseout", function () {

        $goshop.hide();
    })
    $shop_li.on("mouseout", function () {

        $goshop.hide();
    })
    // 数据渲染
    $(document).ready(function () {
        var options = {
            url: "../static/details_data.json",
            type: "GET",
            datatype: "json",
            success: function (res) {
                console.log(res);
                render(res);
            },
            error: function (xhr) {
                console.log(xhr);
            }
        }
        $.ajax(options);

    })
    function render(arr) {
        var li1 = document.querySelector(".list");
        console.log(li1);
        li1.innerHTML = arr.data1.map(item => 
            `<li>
                <div>
                    <img class="picture-img" src="${item.src}" alt="">
                </div>
                <div style="margin: 5px;">
                    <div class="color_pic">
                        <ul>
                            <li>
                                <img class="picture-img" src="${item.color_src1}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src2}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src3}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src4}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src5}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src6}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src7}" onerror="javascript:this.remove()">
                            </li>
                        </ul>
                    </div>
                    <div class="p">
                        <p>${item.title}</p>
                        <span>${item.size}</span>
                    </div>
                    <p>${item.title_all}</p>
                    <span style="color: black;font-weight: bold;">${item.price}</span>
                    <div>
                        <span class="xingxing">
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                        </span>
                        <span>
                            (${item.num})
                        </span>
                    </div>
                    <button class="add">加入购物车</button>
                </div>
        </li>`)
        var list2 = document.querySelector(".list2");
        list2.innerHTML = arr.data2.map(item => 
            `<li>
                <div>
                    <img class="picture-img" src="${item.src}" alt="">
                </div>
                <div style="margin: 5px;">
                    <div class="color_pic">
                        <ul>
                            <li>
                                <img class="picture-img" src="${item.color_src1}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src2}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src3}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src4}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src5}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src6}">
                            </li>
                            <li>
                                <img class="picture-img" src="${item.color_src7}" onerror="javascript:this.remove()">
                            </li>
                        </ul>
                    </div>
                    <div class="p">
                        <p>${item.title}</p>
                        <span>${item.size}</span>
                    </div>
                    <p>${item.title_all}</p>
                    <span style="color: black;font-weight: bold;">${item.price}</span>
                    <div>
                        <span class="xingxing">
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                            <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                        </span>
                        <span>
                            (${item.num})
                        </span>
                    </div>
                </div>
        </li>`)
    }

    var cart = getCartData();

    function getCartData( cart_name = "cart"){
        // 判定localstorage 里面是否存在 cart数据， 如果存在我们就把他变成对象返回出去赋值给 cart ; 
        // 如果不存在那么我们就返回一个空对象; 
        try{
                var res = JSON.parse( localStorage.getItem(cart_name))
                // 如果不存在cart那么我们需要返回一个空对象; 
                if( res === null ) return {};
                return res; 
        }catch(e){
                // console.log("error");
                return {};
        }
    }

    $(".add").on("click" , ".add_cart" , function(){
        console.log("加入购物车");
        // 思考问题 : 我向购物车加入了谁 ? 
        // - 每个商品都要有一个独立的id ; 
        // - 这个独立的id是标识商品唯一性的一个编号; 
        // 把这个id给保存到localstorage 里面就可以了; 
        var id = $(this).attr("data-id");
        // console.log(id);
        // 除了购物车的商品id之外还要存储购物车的商品数量; 
        // 最简单的数据存储结构是一个对象; 
        // {
        //       id : 数量
        // }
        // 判断  cart对象里面是否存在当前的id ; 
        if( id in cart ){
                // 如果存在让数量 ++;
                cart[id] ++ ; 
        }else{
                // 如果不存在建立初始结构; 
                cart[id] = 1; 
        }
        // console.log(cart);
        // 把cart数据保存在 localstorage 里面; 
        localStorage.setItem( "cart" , JSON.stringify( cart ) );
    });
})
